<template>
	<div class="main-1">
		<div class="warp">
			<div class="top"></div>
			<div class="bottom">
				<div class="steep-item" v-for="(item, key) in steepList" :key="key" :class="currentSteep === key ? 'on' : ''">
					<div class="steep-number">{{ key + 1 }}</div>
					<div class="steep-title">{{ item }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {};
	},
	props: {
		steepList: {
			type: Array,
			validator: value => {
				return value.length === 2;
			}
		},
		currentSteep: {
			type: Number,
			default: () => {
				return 0;
			}
		}
	},
	methods: {}
};
</script>

<style scoped lang="scss">
.main-1 {
	width: 100%;
	font-size: 0;
	.warp {
		width: 100%;
		.top {
			height: 89upx;
			border-bottom: 1px solid #f6f6f6;
		}
		.bottom {
			height: 89upx;
			border-top: 1px solid #f6f6f6;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.steep-item {
				position: relative;
				width: calc(100% / 2);
				height: 100%;
				font-size: 0;
				.steep-number {
					position: absolute;
					width: 40upx;
					height: 40upx;
					border-radius: 50%;
					background: #dadada;
					font-size: 36upx;
					line-height: 40upx;
					color: #fff;
					text-align: center;
					left: 50%;
					margin-left: -20upx;
					top: -20upx;
				}
				.steep-title {
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					// align-items: center;
					font-size: 30upx;
					line-height: 1;
					color: #dadada;
					padding-top: 36upx;
				}
			}
			.on {
				.steep-number {
					background: $uni-color-qian;
				}
				.steep-title {
					color: #999999;
				}
			}
		}
	}
}
</style>
